<script type="text/javascript">
function submit_policy_update(isforce) {
    $('.rtn-tip').hide();
    var name = $("#volume_isolation_update").find("#policy_name_cr");
    var iplis = $("#volume_isolation_update .ip-container ul").find('li');
    var initlis = $("#volume_isolation_update .initiator-container ul").find('li');

    var bValid = true;
    //var isforce = false;
    bValid = bValid && checkLength(name, "名称", 1, 32, true);
    bValid = bValid && checkRegexp(name, /^[0-9a-z-:]+$/, "名称应由小写英文字母、数字、中划线(英文)或冒号(英文)构成。", true);

    //组装多个IP和initiator
    var ips = '';
    var inits = '';
    for (var i = 0; i < iplis.length; i++) {
        ips += $(iplis[i]).text();
        ips += ';';
    }
    for (var i = 0; i < initlis.length; i++) {
        inits += $(initlis[i]).text();
        inits += ';';
    }

    if (bValid) {
        bValid = false;
        if (!ips && !inits) {
            $('.rtn-tip').text('请至少输入一个ip地址或者ininitiator').slideDown('fast');
            return;
        }
        $submitBtn = $('.modal-footer').find('.btn-blue');
        $submitBtn.html('<i class="fa fa-spinner fa-spin" style="margin:3px 6px;"></i>');
        $('.rtn-tip').slideUp('fast');
        $.post("/access_control/update", {
                "id": "{{ policy.id }}",
                "name": name.val(),
                "iprange": ips,
                "initiatorName": inits,
                "isforce": isforce
            },
            function(data) {
                if (data.reply.is_success) {
                    angular.element('#accessPolicyButton').scope().close();
                    $('#isolation_table').trigger("reloadGrid")
                    form_validation = true;
                } else {
                    error = data.reply.error;
                    $('.rtn-tip').text(error).slideDown('fast');
                    $submitBtn.html(SelfTranslate("[[ 'label ok'|translate ]]"));
                    bValid = true;
                }
            });
    }
}

$(function() {
    //点击tab切换ip地址方式和initiator方式
    $("#volume_isolation_update ul.tab-container li").on('click', function() {
        $.each($('#volume_isolation_update input'), function(i, n) {
            updateTips('', $(n), true);
        });
        var text = $(this).find('a').text();
        if (text.indexOf('WWWN') > -1) {
            return;
        } else if (text.indexOf('IP') > -1) {
            $('#ip_style').show();
            $('#initiator_style').hide();
        } else if (text.indexOf('initiator') > -1) {
            $('#ip_style').hide();
            $('#initiator_style').show();
        }
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });

    //已经添加的ip和initiator
    var add_initiator = "{{policy.initiatorName}}"
    var add_ip = "{{policy.iprange}}";
    var add_ips = add_ip.split(';');
    var add_initiators = add_initiator.split(';');
    for (var i = 0; i < add_ips.length; i++) {
        if (add_ips[i] != "None" && add_ips[i] != "") {
            var html = '';
            html += '<li>'
            html += add_ips[i];
                html += '<span><img src="/static/img/folder_minus.png" alt=""></span></li>';
                $('#ip_style .ip-container ul').append($(html));
        }
    }
    for (var i = 0; i < add_initiators.length; i++) {
        if (add_initiators[i] != "None" && add_initiators[i] != "") {
            var html = '';
            html += '<li>'
            html += add_initiators[i];
            html += '<span><img src="/static/img/folder_minus.png" alt=""></span></li>';
            $('#initiator_style .initiator-container ul').append($(html));
        }
    }

    //ip输入框后添加图标的点击事件
    $('#ip_style .ip-input-container span').on('click', function() {
        var ip_input = $(this).siblings('input');
        var bValid = true;
        //单击添加按钮后，进行ip地址的校验
        bValid = bValid && checkNull(ip_input, "ip地址不允许为空。");
        bValid = bValid && checkIpinputRegexp(ip_input, "ip输入格式不合法。");
        bValid = bValid && checkOnlyIp(ip_input, $('.ip-container ul'));
        if (bValid) {
            var html = '';
            html += '<li>'
            html += $(this).siblings('input').val();
            html += '<span><img src="/static/img/folder_minus.png" alt=""></span></li>';
            $('#ip_style .ip-container ul').append($(html));
            $(this).siblings('input').val('');
        }
    });

    //initiator输入框后添加图标的点击事件
    $('#initiator_style .initiator-input-container span').on('click', function() {
        var initiator_input = $(this).siblings('input');
        var bValid = true;
        //单击添加按钮后，进行initiator的校验
        bValid = bValid && checkNull(initiator_input, "initiator不允许为空。");
        bValid = bValid && checkOnlyInitator(initiator_input, $('.initiator-container ul'));
        if (bValid) {
            var html = '';
            html += '<li>'
            html += $(this).siblings('input').val();
            html += '<span><img src="/static/img/folder_minus.png" alt=""></span></li>';
            $('#initiator_style .initiator-container ul').append($(html));
            $(this).siblings('input').val('');
        }
    });

    //删除事件
    $('#ip_style .ip-container,#initiator_style .initiator-container').delegate('span', 'click', function() {
        $(this).parent().remove();
    });

    /* 此页面为小图标单独绑定鼠标移入移出事件
        不使用utils.js的通用事件
        是因为此页面的结构与其他页面不同
     */
    var obj = {
        "ip_input": "支持单个IP、同一网段IP地址192.168.1.[2~15,18,19]；多个IP地址以分号隔开",
        "initiator_input": "多个initiator名称以分号隔开。",
        'access_control_name': '名称应由1至32位小写英文字母、数字、中划线或冒号构成。'
    }
    $('.fa-question-circle[itype=access_control_name]').on('mouseover',function() {
        var text = obj['access_control_name'];
        var top = ($(this)[0].offsetTop + 20) + 'px';
        var left = ($(this)[0].offsetLeft -20) + 'px';
        var $tip = $('#volume_isolation_update').find('.tip');
        $tip.find('p').text(text);
        $tip.find('span').css({
            'left': '10%',
            'bottom': '100%',
            'border-top': '5px solid transparent',
            'border-bottom': '5px solid rgba(0,0,0,0.4)'
        });
        $tip.css({
            'top': top,
            'left': left,
            'z-index': '1'
        });
    }).on('mouseout', function() {
        var $tip = $('#volume_isolation_update').find('.tip');
        $tip.find('span').css({
            'left': '17%',
            'bottom': '-10px',
            'border-bottom': '5px solid transparent',
            'border-top': '5px solid rgba(0,0,0,0.4)'
        });
        $tip.css({
            'top': '-9999px',
            'left': '-9999px'
        });
    });
    $('.fa-question-circle[itype=ip_input]').on('mouseover', function() {
        var text = obj['ip_input'];
        var top = ($(this)[0].offsetTop + 80) + 'px';
        var left = $(this)[0].offsetLeft;
        var $tip = $('#volume_isolation_update').find('.tip');
        $tip.find('p').text(text);
        $tip.find('span').css({
            'left': '17%'
        });
        $tip.css({
            'top': top,
            'left': left
        });
    }).on('mouseout', function() {
        var $tip = $('#volume_isolation_update').find('.tip');
        $tip.css({
            'top': '-9999px',
            'left': '-9999px'
        });
    });

    $('.fa-question-circle[itype=initiator_input]').on('mouseover', function() {
        var text = obj['initiator_input'];
        var top = ($(this)[0].offsetTop + 125) + 'px';
        var left = $(this)[0].offsetLeft;
        var $tip = $('#volume_isolation_update').find('.tip');
        $tip.find('p').text(text);
        $tip.find('span').css({
            'left': '21%'
        });
        $tip.css({
            'top': top,
            'left': left
        });
    }).on('mouseout', function() {
        var $tip = $('#volume_isolation_update').find('.tip');
        $tip.css({
            'top': '-9999px',
            'left': '-9999px'
        });
    });
    /* 绑定移入移出事件结束 */

});
</script>
<div class="modal-header">
    <h3>编辑访问策略</h3>
</div>
<div class="modal-body modal-body-height" id="volume_isolation_update">
    <div class="access-control-update-box">
        <div class="rtn-tip"></div>
        <div class="access-control-name">
            <label>名称</label><span>*</span>
            <i class="fa fa-question-circle" itype="access_control_name"></i>
            <div>
                <input id="policy_name_cr" type="text" value="{{ policy.name }}">

            </div>
        </div>
        <ul class="tab-container">
            <li class="active"><a>IP地址方式</a></li>
            <li><a>initiator名称方式</a></li>
            <li><a>WWWN方式</a></li>
        </ul>
        <div class="tab-content">
            <div id="ip_style">
                <p>IP地址方式</p>
                <div class="ip-input-container">
                    <input type="text" />
                    <span>
                        <img src="/static/img/folder_plus.png" alt="">
                    </span>
                    <i class="fa fa-question-circle" itype="ip_input"></i>
                </div>
                <p style="margin-top: 30px;">已添加ip地址</p>
                <div class="ip-container">
                    <ul>
                    </ul>
                </div>
            </div>
            <div id="initiator_style" style="display: none;">
                <p>initiator方式</p>
                <div class="initiator-input-container">
                    <input type="text" />
                    <span>
                        <img src="/static/img/folder_plus.png" alt="">
                    </span>
                    <i class="fa fa-question-circle" itype="initiator_input"></i>
                </div>
                <p style="margin-top: 30px;">已添加initiator名称</p>
                <div class="initiator-container">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="error-tip error-tip-down">
        <p></p><span></span>
    </div>
    <div class="tip">
        <p></p><span></span>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-blue" ng-click="update_ok()">[[ 'label ok'|translate ]]</button>
    <button class="btn btn-white" ng-click="cancel()">[[ 'label cancel'|translate ]]</button>
</div>
